<template>
  <view class="home flex column">
    <u-navbar :title-bold="true" title="人员信息告警" back-icon-color="#333" title-color="#000">
      <view slot="right" class="navbar-right">
        <image src="/static/image/screen.svg" @click="clickBtn" class="navbar-right--icon" />
      </view>
    </u-navbar>
    <!-- 搜索框 -->
    <view class="u-flex u-p-20">
      <picker-item v-model="searchData.customerId" :options="nameList" changeValue="id" @change="handleSelectChange"
        class="u-m-r-10" />
      <picker-alarm-type v-model="searchData.warningType" :options="warningTypeList" changeValue="id"
        @change="handleSelectChange" />
    </view>

    <!-- 总数 -->
    <view class="all t-white">
      <text>告警条数</text>
      <h4 class="u-font-40 u-p-l-10 "> {{ total }} </h4>
    </view>

    <!-- 列表 -->
    <scroll-view :scroll-y="true" class="container item one" refresher-enabled="true" :refresher-triggered="triggered"
      :refresher-threshold="50" refresher-background="#F5F5F5" @refresherrefresh="onRefresh" @refresherpulling="onPulling"
      @refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="onScrollToLower">
      <view class="container-body u-p-l-20 u-p-r-20">
        <!-- v-if="list && list.length" -->
        <template v-if="list && list.length">
          <view class="body-cont u-flex" v-for="item in list">
            <view class="body-cont-msg u-m-l-20 u-m-r-20 w-100p">
              <view class="body-cont-msg-detail">
                <h4 class="u-m-b-20">{{ item.warningName }}</h4>
                <view class="u-flex u-m-b-20">
                  <view class="u-p-r-20">煤&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;矿:</view>
                  <view>{{ item.customerName }}</view>
                </view>
                <view class="u-flex u-row-between u-m-b-20">
                  <view>
                    <text class="u-p-r-20">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</text>
                    <text>{{ item.name }}</text>
                  </view>
                  <u-tag text="查看档案" type="success" shape="circle" border-color="#369164" color="#369164" bg-color="#fff"
                    size="mini" @click="detail(item)" />
                </view>
                <view class="u-flex u-m-b-20">
                  <view class="u-p-r-20">告警时间:</view>
                  <view>{{ item.startTime }}</view>
                </view>
                <view class="u-flex u-m-b-20" style="align-items:unset">
                  <view class="u-p-r-20 gjnr" >告警内容:</view>
                  <view>
                    <view>{{ item.warningContent }}</view>
                  </view>

                </view>
              </view>
            </view>

          </view>
          <view class="p-t-10 p-b-10">
            <u-loadmore :status="status" />
          </view>
        </template>
        <template v-if="showEmpty">
          <view class="c-empty p-absolute-center">
            <u-empty text="暂无数据"></u-empty>
          </view>
        </template>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import PickerItem from "../../../components/pickerItem/pickerItem.vue";
import pickerAlarmType from "../../../components/pickerItem/pickerAlarmType.vue";
import UTag from '../../../uview-ui/components/u-tag/u-tag.vue';

export default {
  name: 'index',
  components: { PickerItem, pickerAlarmType, UTag },
  data () {
    return {
      emitEvent: 'practitionerStaff',
      searchData: {
        customerId: "",
        warningType: '', //报警类型id
        pageSize: 20,
        pageNumber: 1,
      },
      nameList: [],// 搜索下拉的煤矿名称列表
      warningTypeList: [],
      triggered: false, // 下拉刷新
      showEmpty: false,
      status: "loading",
      list: [],
      total: ''
    }
  },
  methods: {
    /**
     * 请求数据
     */
    async getData () {
      const res = await this.$post('/cyry/alarm/person/dataList', this.searchData)
      if (res && res.body.content) {
        this.list = this.searchData.pageNumber === 1 ? res.body.content : this.list.concat(res.body.content)
        // 到底了
        if (res.body.content.length < this.searchData.pageSize) {
          this.status = 'nomore'
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.list && this.list.length === 0) {
          this.showEmpty = true
        } else {
          this.showEmpty = false
        }
        this.total = res.body.total
      }
    },
    clickBtn () {
      const url = '/pages/practitioner/staff/screen'
      const form = {
        ...this.searchData,
      }
      uni.navigateTo({
        url: `${url}?form=${JSON.stringify(form)}&emitEvent=${this.emitEvent}`
      })
    },
    /**
     * 请求煤矿名称列表
     */
    async getOptions () {
      this.nameList = getApp().globalData.customerList;

      const {body}=await this.$get(`/cyry/common/getAlarmType?type=2`)
      if (body) {
          this.warningTypeList = body
        }
    },
    /**
     * select选中
     */
    handleSelectChange (val) {
      console.log('teh', val);
      setTimeout(() => {
        this.getData();
      }, 300);
    },
    /**
     * 搜索
     */
    handleSearch () {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      this.searchTimer = setTimeout(() => {
        this.getData()
      }, 300)
    },
    /**
     * 上拉加载
     */
    onScrollToLower () {
      if (this.status === "loading") {
        this.searchData.pageNumber++;
        this.getData();
      }
    },
    /**
     * 职务状态判断
     */
    getColor (val) {
      switch (val) {
        case value:// 在职
          return {
            color: '#5AB98F',
            background: 'rgba($color: #5AB98F, $alpha: 0.2)',
          }
        case value:// 已离职
          return {
            color: '#FF800A',
            background: 'rgba($color: #FF800A, $alpha: 0.2)',
          }
        default:
          break;
      }
    },
    // 查看档案
    detail (item) {
      uni.navigateTo({
        url: '/pages/practitioner/archives/detail??employeeId=' + item.employeeId
      })
    },
    onPulling (e) { },
    onRefresh () {
      if (this.Isfreshing) return;
      this.Isfreshing = true;
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true;
        this.init();
        this.getData();
        setTimeout(() => {
          this.triggered = false; // 触发onRestore，关闭刷新图标
          this.Isfreshing = false;
        }, 1200);
      }
    },
    onRestore () { },
    onAbort () { },
  },

  async onLoad (option) {
    await this.getOptions();
    this.$nextTick(()=>{
      this.searchData.customerId = option.customerId
      this.searchData.warningType = option.warningType
      
      this.getData()
    })

    uni.$on(this.emitEvent, res => {
      this.searchData = {
        ...this.searchData,
        ...res,
        pageNumber: 1
      }
      this.getData()
    })
  },
  onUnload () {
    // 清除监听
    uni.$off(this.emitEvent)
  }
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  .navbar-right {
    margin-right: 40rpx;

    &--icon {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .search {
    padding: 0;
  }

  // 总人数
  .all {
    width: calc(100% - 20rpx);
    height: 140rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('/static/image/workbench/practitioner/person-bg.png') no-repeat 100% 100%;
  }

  .body-cont {
    box-shadow: 0 0 18rpx 0 rgba($color: #014833, $alpha: 0.2);
    border-radius: 12rpx;
    margin-top: 24rpx;
    padding: 28rpx 20rpx;

    &-msg {
      &-detail {
        color: #666;

        h4 {
          color: #333;
        }
      }
    }


  }
}

.gjnr{
    word-break: keep-all;
}
</style>
